<template>
  <div class="photoinfo-container">
    <h3 class="title">{{photoinfo.title}}</h3>
    <p class="info">
      <span>发表时间：{{photoinfo.add_time|dateFormat}}</span>
      <span>点击：{{photoinfo.click}}</span>
    </p>
    <!-- 缩略图 -->
    <div class="thumb-img-list">
      <!-- <img :src="item.src" alt v-for="(item,i) in photolist" :key="i" /> -->
      <vue-preview :slides="photolist" class="imgPrev"></vue-preview>
    </div>
    <!-- 内容区域 -->
    <div class="content" v-html="photoinfo.content"></div>
    <!-- 评论子组件 -->
    <!-- 评论子组件需要一个newid参数 -->
    <comment :newsid="id"></comment>
  </div>
</template>

<script>
// 导入评论组件
import comment from "../sub-components/Comment.vue";
export default {
  name: "",
  data() {
    return {
      // 图片信息
      photoinfo: {},
      // 缩略图
      photolist: [],
    };
  },
  components: {
    // 私有组件注册
    comment,
  },
  created() {
    this.getPhotoInfo();
    this.getThumbImg();
  },
  mounted() {},
  methods: {
    // 当调用一个异步方法，并且这个异步方法的返回值是promise对象的时候，才可以使用async和await
    async getPhotoInfo() {
      const { data } = await this.$http.get("/api/getimageInfo/" + this.id);
      if (data.status === 0) {
        this.photoinfo = data.message[0];
        console.log("this.photoinfo :>> ", this.photoinfo);
      }
    },
    async getThumbImg() {
      const { data } = await this.$http.get("/api/getthumimages/" + this.id);
      if (data.status === 0) {
        // 为每一张图片设置宽和高
        // vue-preview规定，用来绑定的数据源必须是一个数组，数组里的每一项都要是个js对象，该js对象应该形如 {w: 600, h: 500, src: xxxx, msrc: xxxxxx}
        data.message.forEach((item) => {
          item.w = 600;
          item.h = 400;
          // 小图的url
          item.msrc = item.src;
        });
        this.photolist = data.message;
        console.log("this.photolist :>> ", this.photolist);
      }
    },
  },
  //   这里要和router.js中传进来的参数名字一致
  props: ["id"],
};
</script>
<style lang='scss' scoped>
.title {
  font-size: 15px;
  text-align: center;
  margin: 10px 0;
}
.info {
  font-size: 13px;
  display: flex;
  justify-content: space-around;
}
.content {
  padding: 10px;
  text-indent: 2em;
}
</style>

